<template>
  <view class="content">
<!--    <view class="form-row">
      <view class="flex-two">
        <view class="jjzy" v-if="detailObj1.detailObj.importStatus == '1'">
          <span class="form-border-red">紧急重要</span>
        </view>
      </view>
      <view class="flex-one flex-block flex-end column-block column-none">
        <text class="text-red">紧急程度</text>
        <text class="margin-left10">{{detailObj1.detailObj.emergencyLevelName}}</text>
      </view>
    </view>
    <view class="form-row">
      <view class="flex-one flex-block">
        <view class="column-block column-none">
          <text class="head-title">{{ titleUnit }}</text>
        </view>
      </view>
    </view>-->

    <view class="form-border">
      <view class="form-row">
        <view class="flex-one flex-block column-block column-right column-bottom">
          <view class="text-red">文件标题</view>
        </view>
        <view class="flex-eight column-block column-right column-bottom">
          <text class="margin-left10">{{detailObj1.detailObj.title}}</text>
        </view>
      </view>
      <view class="form-row">
        <view class="flex-one flex-block column-block column-right column-bottom" style="padding-right: 28rpx">
          <view class="text-red">紧急程度</view>
        </view>
        <view class="flex-two column-block column-right column-bottom">
          <text>{{this.dict.getDictNameByDictCode('swjjcd',detailObj1.detailObj.emergencyLevel)}}</text>
        </view>
        <view class="flex-one flex-block column-block column-right column-bottom">
          <view class="text-red">收文时间</view>
        </view>
        <view class="flex-two column-block column-right column-bottom">
          <text>{{detailObj1.detailObj.swTime}}</text>
        </view>
        <view class="flex-one flex-block column-block column-right column-bottom">
          <view class="text-red">办结时限</view>
        </view>
        <view class="flex-two column-block column-right column-bottom">
          <text>{{detailObj1.detailObj.limitDate}}</text>
        </view>
      </view>
      <view class="form-row">
        <view class="flex-one flex-block column-block column-right column-bottom" style="padding-right: 28rpx">
          <view class="text-red">来文单位</view>
        </view>
        <view class="flex-two column-block column-right column-bottom">
          <text>{{detailObj1.detailObj.fwDeptName}}</text>
        </view>
        <view class="flex-one flex-block column-block column-right column-bottom">
          <view class="text-red">来文编号</view>
        </view>
        <view class="flex-two column-block column-right column-bottom">
          <text>{{detailObj1.detailObj.fwCode}}</text>
        </view>
        <view class="flex-one flex-block column-block column-right column-bottom">
          <view class="text-red">收文编号</view>
        </view>
        <view class="flex-two column-block column-right column-bottom">
          <text>{{detailObj1.detailObj.swCode}}</text>
        </view>
      </view>

      <view class="form-row">
        <view class="flex-one flex-block column-block column-right column-bottom">
          <view class="text-red">主办处室</view>
        </view>
        <view class="flex-eight column-block column-right column-bottom flex align-center">
          <text class="margin-left10">{{detailObj1.detailObj.directDeptNames}}</text>
        </view>
      </view>
      <view class="form-row">
        <view class="flex-one flex-block column-block column-right column-bottom">
          <view class="text-red">协办处室</view>
        </view>
        <view class="flex-eight column-block column-right column-bottom flex align-center">
          <text class="margin-left10">{{detailObj1.detailObj.coDeptNames}}</text>
        </view>
      </view>
      <view class="form-row">
        <view class="flex-one flex-block column-block column-right column-bottom">
          <view class="text-red">已分办部门</view>
        </view>
        <view class="flex-eight column-block column-right column-bottom flex align-center">
          <text class="margin-left10">{{fbDeptNameList}}</text>
        </view>
      </view>
      <view class="form-row">
        <view class="flex-one flex-block column-block column-right column-bottom  flex align-center">
          <view class="text-red">传阅情况</view>
        </view>
        <view class="flex-eight column-block column-right column-bottom">
          <text class="margin-left10">{{chuanYueNameList}}</text>
        </view>
      </view>
      <view class="form-row">
        <view class="flex-one flex-block column-block column-right column-bottom  flex align-center">
          <view class="text-red">已发送</view>
        </view>
        <view class="flex-eight column-block column-right column-bottom">
          <text class="margin-left10">{{fsDeptNameList}}</text>
        </view>
      </view>
      <view class="form-row" style="min-height: 160rpx">
        <view class="flex-one flex-block column-block column-bottom column-right">
          <text class="text-red flex-block">司局领导批示</text>
        </view>
        <view class="flex-eight column-block  column-bottom">
          <template v-if="detailObj1.opinion != null && detailObj1.opinion['opinion_content_ldps'] != undefined">
            <view class="opinion" v-for="item in detailObj1.opinion.opinion_content_ldps">
              <view class="opinion-left">{{item.opinion}}</view>
              <view class="opinion-right">
                <!-- base64签名图片 -->
                <img v-if="item.signature!='' && item.signature != undefined" :src="`data:image/png;base64,`+item.signature" alt="图片未上传" />
                <text v-else class="opinion-user">{{item.userName}}</text>
                <text class="opinion-date">{{item.approvalTime}}</text>
              </view>
            </view>
          </template>
        </view>
      </view>
      <view class="form-row" style="min-height: 160rpx">
        <view class="flex-one flex-block column-block column-bottom column-right">
          <text class="text-red flex-block">办理意见</text>
        </view>
        <view class="flex-eight column-block  column-bottom">
          <template v-if="detailObj1.opinion != null && detailObj1.opinion['blbmyj'] != undefined">
            <view class="opinion" v-for="(item,index) in detailObj1.opinion.blbmyj">
              <!--如果和上一项意见的部门相同，则隐藏部门-->
              <view class="opinion-left text-bold" v-if="!(index>0 && detailObj1.opinion.blbmyj[index-1].parentDeptCode == item.parentDeptCode)">{{item.parentDeptName}}</view>
              <view class="opinion-left">{{item.opinion}}</view>
              <view class="opinion-right">
                <!-- base64签名图片 -->
                <img v-if="item.signature!='' && item.signature != undefined" :src="`data:image/png;base64,`+item.signature" alt="图片未上传" />
                <text v-else class="opinion-user">{{item.userName}}</text>
                <text class="opinion-date">{{item.approvalTime}}</text>
              </view>
            </view>
          </template>
        </view>
      </view>


      <view class="form-row">
        <view class="flex-one flex-block column-block column-right column-bottom">
          <view class="text-red">正文</view>
        </view>
        <view class="flex-eight column-block column-right column-bottom">
          <view class="opinion" v-if="detailObj1.detailBody !=null">
            <view class="opinion-right" v-for="(item,index) in detailObj1.detailBody" :key="index">
              <text>{{item.attachName}}</text>
            </view>
          </view>
        </view>
      </view>

      <view class="form-row">
        <view class="flex-one flex-block column-block column-right column-bottom">
          <view class="text-red">附件</view>
        </view>
        <view class="flex-eight column-block column-right column-bottom">
          <view class="opinion" v-if="detailObj1.detailAttachment != undefined &&detailObj1.detailAttachment.length>0 ">
            <view class="opinion-right" v-for="(item,index) in detailObj1.detailAttachment" :key="index">
              <text>{{item.attachName}}</text>
            </view>
          </view>
        </view>
      </view>


      <view class="form-row">
        <view class="flex-one flex-block column-block column-right column-bottom">
          <view class="text-red">备注</view>
        </view>
        <view class="flex-eight column-block column-right column-bottom">
          <text class="margin-left10">{{detailObj1.detailObj.remark}}</text>
        </view>
      </view>

    </view>
  </view>
</template>

<script>
export default {
  name: "compo-read",
  props: {
    detailObj1: {
      detailObj:Object,       // 公文基本信息
      detailBody:Object,      // 正文
      detailAttachment:Object,// 附件
      relation:Object,        // 附加公文[{"id":"1c0962f8839d46f792f84e5c89c96f14","title":"ppap","relateDocId":"4ec205b8334446f9b932d0fcb3896bc8","proInstId":"4ec205b8334446f9b932d0fcb3896bc8"},{"id":"2f4aa437ecba4c748bff911f03667147","title":"py","relateDocId":"86d30c881c494b468534685bb0746174","proInstId":"86d30c881c494b468534685bb0746174"}]
      opinion:Object,         // 意见
    },
    proInstId: {
      type: String,
      default: ''
    },
    otherDetail:{
      fbDeptList:{//分办处室
        type:Array,
        default:()=>[]
      },
      chuanYueList:{//传阅情况
        type:Array,
        default:()=>[]
      }
    }
  },

  data() {
    return {
      prevDate: '',
      prevUser: '',
      titleUnit:'',//版式文件名称
    };
  },
  computed: {
    fbDeptNameList(){
      return this.otherDetail.fbDeptList.map(item=>item.deptName).join('、')
    },
    chuanYueNameList(){
      return this.otherDetail.chuanYueList.map(item=>item.receiverDeptName).join('、')
    },
    fsDeptNameList(){
      return this.otherDetail.fsDeptList.map(item=>item.acceptName).join('、')
    }
  },
  watch: {

  },

  mounted() {
    this.titleUnit = /*this.cache.get('userInfo').deptName+*/"民航局收电批办单"
  },
  methods: {
  }



}
</script>

<style scoped>
.margin-top20{
  margin-top: 20rpx;
}
.margin-top30{
  margin-top: 30rpx;
}
.margin-left10{
  margin-left: 10rpx;
}
.margin-left20{
  margin-left: 20rpx;
}
.content {
  padding: 10rpx;
}
.tranInfo {
  display: flex;
  justify-content: flex-end;
  margin-right: 10rpx;
  font-size: 18rpx;
}
.tranInfo span {
  font-weight: 600;
  padding: 0 4rpx;
}
.head-title{
  padding: 10rpx 0;
  margin: 20rpx 0;
  letter-spacing: 10rpx;
  color: #ed1c24;
  text-align: center;
  font-weight: bold;
  font-size: 36rpx;
}
.jjzy {
  margin: 26rpx 10rpx;
}
.jjzy span {
  color: #ed1c24;
  padding: 10rpx;
}


/*766*/
.form-border {
  border: 1rpx solid #ed1c24;
}
.column-block, .column-row {
  padding: 18rpx 15rpx;
  border: 1rpx solid #ed1c24;
  border-bottom: none;
  line-height: 38rpx;
  font-size: 26rpx;
}

.column-bottom, .column-right {
  border: none;
}

.column-bottom:before {
  position: absolute;
  content: "";
  display: block;
  width: 100%;
  height: 1rpx;
  background: #ed1c24;
  bottom: 0;
  left: 0;
}

.column-right::after {
  content: "";
  display: block;
  width: 1rpx;
  height: 100%;
  background:#ed1c24;
  position: absolute;
  top: 0;
  right: 0;
}
/*767*/
.form-border {
  border: 1rpx solid #ed1c24;
}
.form-border-red{
  border: 1rpx solid #ed1c24;
}
.flex-row {
  display: flex;
  flex: 1;
}
.flex-block {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}
/*941*/
.form-row {
  display: flex;
  justify-content: center;
  flex: 1;
}


.column-left {
  border: none;
  border-left: 1rpx solid #ed1c24;
}

.column-none {
  border: none;
}

.flex-one {
  flex: 1;
  position: relative;
}

.flex-two {
  flex: 2;
  display: flex;
  align-items: center;
  position: relative;
}

.flex-three {
  flex: 3;
  position: relative;
}

.flex-four {
  flex: 4;
  position: relative;
}

.flex-five {
  flex: 5;
  position: relative;
}

.flex-six {
  flex: 6;
  position: relative;
}

.flex-seven {
  flex: 7;
  position: relative;
}

.flex-eight {
  flex: 8;
  position: relative;
}

.flex-nine {
  flex: 9;
  position: relative;
}

.flex-ten {
  flex: 10;
  position: relative;
}
.flex-eleven {
  flex: 11;
  position: relative;
}
.flex-twelve {
  flex: 12;
  position: relative;
}

.flex-column {
  display: flex;
  flex-direction: column;
}
.flex-end {
  justify-content: flex-end;
}

/* 意见相关样式 */
.opinion{
  display: flex;
  flex-direction: column;
  overflow: hidden;
  font-size: 26rpx;
  line-height: 24px;

}

.opinion .opinion-left{
  text-align: left;
  color: #323233;
}
.opinion .opinion-right{
  float:right;
  text-align: right;
  color: #969799;
}
.opinion .opinion-right .opinion-user{
  font-weight: 400;
  color: #000000;
}
.opinion .opinion-right .opinion-date{
  color: #323233;
  margin-left: 20rpx;
}

</style>
